<template>
  <div class="login-page">
    <yukino-snow></yukino-snow>
    <div class="login-panel">
      <div class="login-header">
        <h2>登录</h2>
        <p>Yukinoshita Yukino</p>
      </div>
      <div class="line"></div>

      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="yukino-form">
        <!-- 账号 -->
        <div class="yukino-input">
          <el-form-item prop="username">
            <label for="username">Username</label>
            <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
          </el-form-item>
        </div>
        <!-- 密码 -->
        <div class="yukino-input">
          <el-form-item prop="password">
            <label for="password">Password</label>
            <el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
        </div>
        <!-- 登录身份 -->
        <div class="yukino-input">
          <el-form-item prop="role">
            <label for="role">Role</label>
              <el-select v-model="loginForm.role" placeholder="请选择身份">
                <el-option
                    v-for="item in roleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
              </el-select>
            
          </el-form-item>
        </div>        
      </el-form>
      <div class="login-operate">
        <button @click="login">登录</button>
      </div>
      <div class="login-link">
        <el-link href="/forget" :underline="false" type="primary">忘记密码？</el-link>
        <el-link href="/register" :underline="false" type="primary">注册</el-link>
      </div>
    </div>
  </div>
</template>
<script>
import yukinoSnow from '../components/snow'

import qs from 'qs';
export default {
  data() {
    // 是否选择身份
    var checkRole = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择身份"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: '',
        password: '',
        role: '',
      },
      roleList: {
        admin: {
          label: "管理员",
          value: "admin"
        },
        uploader: {
          label: "up主",
          value: "uploader"
        },
        consumer: {
          label: "用户",
          value: "consumer"
        }
      },
      loginRules: {
        username: [{
          required: true,
          message: "请输入账号",
          trigger: "blur"
        }],
        password: [{
          required: true,
          message: "请输入密码",
          trigger: "blur"
        }],
        role: [{
          validator: checkRole,
          trigger: "blur"
        }]
      }
    };
  },
  methods: {
    login() {
      let _this = this;
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$axios.post("/api/login.php", qs.stringify({
            username: _this.loginForm.username,
            password: _this.loginForm.password,
            role: _this.loginForm.role
          })).then((res)=> {
            // 登录成功
            if(res.data === "success") {
              const info = {
                username: _this.loginForm.username,
                password: _this.loginForm.password,
                role: _this.loginForm.role,
              };
              sessionStorage.setItem("User", JSON.stringify(info));
              _this.$notify({
                type: "success",
                message: "欢迎回来，" + _this.loginForm.username + "(●ˇ∀ˇ●)!~",
                duration: 2000,
              });
              setTimeout(function () {
                window.location.href = "/";
              }, 2000);
            } 
            // 登陆失败
            else {
              _this.$notify({
                type: "error",
                message: "请检查一下账号密码Σ(っ °Д °;)っ!~",
                duration: 2000,
              });
              setTimeout(function () {
                window.location.href = "/login";
              }, 2000);
            }
          })
        } else {
          this.$notify({
            type: "error",
            message: "请补完登录信息இ௰இ!~",
            duration: 2000,
          });
          return false;
        }
      });
    },
  },
  components: {
    yukinoSnow
  }
};
</script>
<style scoped>
/* 整个页面 */
.login-page {
  background: url(../assets/pics/yukino_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  color: rgb(233, 233, 233);
}
/* 登录面板 */
.login-panel {
  width: 500px;
  background: rgba(42, 49, 65, 0.6);
  box-shadow: 3px 3px 5px 3px #505d72;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 10px;
  z-index: 1000;
}
/* 标题 */
.login-header h2 {
  margin: 10px 0 5px 0;
}
.login-header p {
  margin-bottom: 5px;
}
/* 输入框 */
.yukino-input {
  width: 400px;
  margin: 0 auto;
}
/* 标签 */
.yukino-input label {
  float: left;
  padding-left: 10px;
  font-size: 18px;
  font-weight: 800;
}
/* 输入框 */
.yukino-input>>>.el-input__inner {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.yukino-input .el-input {
  width: 95%;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
  margin: 10px;
  /* color: #fff; */
}
.yukino-input>>>.el-form-item__error {
  padding-left: 10px !important;
}

.yukino-input .el-select {
  width: 95%;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
  margin: 10px;
  background: rgba(0,0,0,0.2);
}
/* 登录按钮 */
.login-operate button {
  border: none;
  outline: none;
  padding: 5px 15px;
  font-size: 25px;
  font-weight: 800;
  margin: 10px 0;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 8px;
  background: rgba(42, 49, 65, 0.6);
  cursor: pointer;
  transition: 0.5s ease;
}
.login-operate button:hover {
  color: rgba(42, 49, 65, 0.6);
  background: #fff;
  border: 2px solid rgba(42, 49, 65, 0.6);
}
/* 链接 */
.login-link {
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.login-link .el-link {
  color: #fff;
}
/* 分隔符 */
.line {
  /* margin: 0 auto; */
  border-bottom: 1px solid #fff;
  width: 80%;
  margin: 5px auto 15px auto;
}
</style>